Angular Material এর Sidenav একটি জনপ্রিয় কম্পোনেন্ট যা সাইটের নেভিগেশন বা মেনু সিস্টেম তৈরি করতে ব্যবহৃত হয়। এটি একটি স্লাইডিং প্যানেল যা সাধারণত ডিভাইসের বাম অথবা ডান পাশে স্লাইড করে। Sidenav ব্যবহার করা হয় সাধারণত মোবাইল বা ডেস্কটপ অ্যাপ্লিকেশনে যেখানে ইউজারের জন্য একটি সেকেন্ডারি নেভিগেশন সিস্টেম প্রদান করা হয়।

সাইডন্যাভ এর সুবিধা

• রেসপন্সিভ ডিজাইন: Sidenav মোবাইল এবং ডেস্কটপ স্ক্রীনের জন্য উপযুক্ত, এবং এটি রেসপন্সিভ ডিজাইনের মাধ্যমে স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করতে পারে।
• সহজ নেভিগেশন: ব্যবহারকারীকে সহজে নেভিগেট করতে সাহায্য করে, বিশেষ করে যখন অ্যাপ্লিকেশনে অনেকগুলো পেজ বা সেকশন থাকে।
• মোবাইল ফ্রেন্ডলি: মোবাইল ডিভাইসে সাইডন্যাভ একটি হ্যামবার্গার মেনু হিসেবে প্রদর্শিত হতে পারে যা সহজে এক্সেস করা যায়।

Angular Material Sidenav ব্যবহার করা

Angular Material-এ Sidenav ব্যবহার করতে হলে, আপনাকে MatSidenavModule এবং MatListModule ইমপোর্ট করতে হবে।

১. ইন্সটলেশন এবং মডিউল ইমপোর্ট

প্রথমে, Angular Material ইন্সটল করতে হবে:

ng add @angular/material

এরপর, আপনার app.module.ts ফাইলে MatSidenavModule এবং MatListModule ইমপোর্ট করুন:

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';

@NgModule({
  imports: [
    MatSidenavModule,
    MatListModule
  ],
})
export class AppModule { }

২. Sidenav কম্পোনেন্ট তৈরি করা

এখন, HTML ফাইলে সাইডন্যাভ ব্যবহার করতে পারেন। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো:

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened>
    <mat-nav-list>
      <mat-list-item>Home</mat-list-item>
      <mat-list-item>About</mat-list-item>
      <mat-list-item>Contact</mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
    <h1>Welcome to Angular Material Sidenav Example</h1>
  </mat-sidenav-content>
</mat-sidenav-container>

এখানে:

• mat-sidenav-container: এটি একটি কনটেইনার যা সাইডন্যাভ এবং কন্টেন্টকে ধারণ করে।
• mat-sidenav: সাইডন্যাভের কম্পোনেন্ট যা স্লাইডিং প্যানেল হিসেবে কাজ করে।
  • #sidenav: এটি সাইডন্যাভের একটি টেমপ্লেট রেফারেন্স।
  • mode="side": এটি সাইডন্যাভের মুড নির্ধারণ করে (এটি সাইডে স্থায়ীভাবে প্রদর্শিত হবে)।
  • opened: এটি সাইডন্যাভের শুরুর অবস্থায় খোলা থাকবে।
• mat-sidenav-content: এটি সাইডন্যাভের মূল কন্টেন্টের অংশ।
• mat-nav-list: এটি সাইডন্যাভের মধ্যে একটি নেভিগেশন লিস্ট।

৩. Responsive Design

Sidenav রেসপন্সিভ করার জন্য, Angular Material এর mode এবং breakpoints ব্যবহার করা যায়। আপনি চাইলে mode="over" সেট করতে পারেন, যাতে এটি মোবাইল স্ক্রীনে একটি হ্যামবার্গার মেনু হিসেবে প্রদর্শিত হয়।

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="over" position="start">
    <mat-nav-list>
      <mat-list-item>Home</mat-list-item>
      <mat-list-item>About</mat-list-item>
      <mat-list-item>Contact</mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
    <h1>Welcome to the Responsive Sidenav Example</h1>
  </mat-sidenav-content>
</mat-sidenav-container>

এখানে:

• mode="over": এটি সাইডন্যাভকে মোবাইল স্ক্রীনে অ্যাকর্ডিয়ন মেনু হিসেবে তৈরি করবে, যেখানে সাইডন্যাভ শুধুমাত্র বাটনে ক্লিক করলে প্রদর্শিত হবে।
• position="start": এটি সাইডন্যাভের অবস্থান নির্ধারণ করে (ডিফল্টভাবে এটি বাম দিকে থাকে)।

৪. Sidenav-এ অন্যান্য উপাদান যোগ করা

আপনি সাইডন্যাভের মধ্যে অন্যান্য Angular Material উপাদানও ব্যবহার করতে পারেন, যেমন mat-list, mat-button ইত্যাদি।

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened>
    <mat-nav-list>
      <mat-list-item><button mat-button>Dashboard</button></mat-list-item>
      <mat-list-item><button mat-button>Profile</button></mat-list-item>
      <mat-list-item><button mat-button>Settings</button></mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
    <h1>Welcome to the Application</h1>
  </mat-sidenav-content>
</mat-sidenav-container>

এখানে mat-button ব্যবহার করা হয়েছে সাইডন্যাভের লিস্ট আইটেমগুলোর মধ্যে।

Angular Material Sidenav হল একটি শক্তিশালী এবং রেসপন্সিভ কম্পোনেন্ট যা আপনার অ্যাপ্লিকেশনে একটি স্লাইডিং নেভিগেশন প্যানেল তৈরি করতে সাহায্য করে। এটি Mobile-first এবং Responsive Design নিশ্চিত করার জন্য উপযুক্ত, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রীনে সুন্দরভাবে কাজ করে। Sidenav ব্যবহার করে আপনি সহজেই নেভিগেশন সিস্টেম তৈরি করতে পারেন যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং অ্যাপ্লিকেশনের ইউজার ইন্টারফেসের পরিপূর্ণতা বৃদ্ধি করে।

Angular Material এর সাহায্যে একটি রেসপন্সিভ সাইডন্যাভ (Sidenav) তৈরি করা খুবই সহজ এবং এটি একটি জনপ্রিয় উপাদান (component) যা মোবাইল, ট্যাবলেট, এবং ডেস্কটপ ডিভাইসে একটি উন্নত এবং ব্যবহারকারী-বান্ধব লেআউট প্রদান করে। সাইডন্যাভ সাধারণত নেভিগেশন বার হিসেবে ব্যবহৃত হয়, যেখানে ইউজাররা বিভিন্ন পেজ বা সেকশনে সহজে নেভিগেট করতে পারেন।

Angular Material এর MatSidenav কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই একটি রেসপন্সিভ সাইডন্যাভ তৈরি করতে পারেন।

১. প্রথমে প্রয়োজনীয় মডিউল ইমপোর্ট করা

MatSidenavModule এবং MatButtonModule সহ কিছু অন্যান্য Angular Material মডিউল ইনপোর্ট করতে হবে।

১.১. মডিউল ইনপোর্ট করা

import { NgModule } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule
  ],
  ...
})
export class AppModule {}

২. HTML তে সাইডন্যাভ তৈরি করা

এখন, আপনি MatSidenav কম্পোনেন্ট ব্যবহার করে সাইডন্যাভ তৈরি করতে পারবেন। একটি সাইডন্যাভ সাধারণত দুটি অংশে বিভক্ত থাকে: main content এবং sidenav (নেভিগেশন)। সাইডন্যাভ মোবাইল এবং ডেস্কটপ ডিভাইসে বিভিন্ন আকারে প্রদর্শিত হতে পারে।

২.১. স্ট্যাটিক সাইডন্যাভ

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item href="#">Home</a>
      <a mat-list-item href="#">About</a>
      <a mat-list-item href="#">Contact</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
    <h1>Welcome to My Website</h1>
  </mat-sidenav-content>
</mat-sidenav-container>

এখানে:

• mode="side": সাইডন্যাভের স্টাইল নির্ধারণ করে। এটি side বা over হিসেবে হতে পারে। side মানে সাইডন্যাভ ডিফল্টভাবে দৃশ্যমান থাকবে, এবং over মানে এটি বাম বা ডান দিক থেকে স্লাইড হয়ে আসবে।
• opened: সাইডন্যাভ শুরুতে খোলা থাকবে।

২.২. রেসপন্সিভ সাইডন্যাভ (ট্যাবলেট এবং মোবাইলের জন্য)

মোবাইল এবং ট্যাবলেট ডিভাইসে সাইডন্যাভের আচরণ পরিবর্তন করার জন্য, MatSidenav এর mode এবং opened প্রপার্টি কনফিগার করা যায়। আপনি চাইলে angular flex layout বা CSS media queries ব্যবহার করে এটি রেসপন্সিভ করতে পারেন।

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav [mode]="isHandset ? 'over' : 'side'" [opened]="!isHandset">
    <mat-nav-list>
      <a mat-list-item href="#">Home</a>
      <a mat-list-item href="#">About</a>
      <a mat-list-item href="#">Contact</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
    <h1>Welcome to My Website</h1>
  </mat-sidenav-content>
</mat-sidenav-container>

২.৩. TypeScript ফাইলে রেসপন্সিভ চেক করা

এখানে আমরা isHandset ব্যবহার করেছি, যা Breakpoints চেক করে মোবাইল বা ট্যাবলেট ডিভাইসে অ্যাপ্লিকেশনটি রেসপন্সিভ করে।

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isHandset: boolean = false;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe([Breakpoints.Handset])
      .subscribe(result => {
        this.isHandset = result.matches;
      });
  }
}

এখানে:

• BreakpointObserver ব্যবহার করা হয়েছে Handset (মোবাইল) ডিভাইস চেক করতে। যখন মোবাইল ডিভাইসে থাকবে, তখন সাইডন্যাভের মোড over হবে, এবং ডেস্কটপে side হবে।

৩. স্টাইলিং এবং কাস্টমাইজেশন

CSS বা SCSS ব্যবহার করে সাইডন্যাভের আউটলুক কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, সাইডন্যাভের ব্যাকগ্রাউন্ড, সাইডন্যাভের প্রস্থ এবং অন্যান্য উপাদান কাস্টমাইজ করা যেতে পারে।

.example-container {
  height: 100%;
}

mat-sidenav {
  width: 250px;
  background: #3f51b5;
}

mat-sidenav-content {
  padding: 20px;
}

এখানে, সাইডন্যাভের প্রস্থ 250px এবং ব্যাকগ্রাউন্ড কালার #3f51b5 (নীল) দেওয়া হয়েছে।

৪. টগল সাইডন্যাভ (Mobile View)

মোবাইল ভিউতে আপনি সাইডন্যাভের জন্য একটি toggle button তৈরি করতে পারেন যা সাইডন্যাভকে খোলার এবং বন্ধ করার কাজ করবে।

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav [mode]="isHandset ? 'over' : 'side'" [opened]="!isHandset">
    <mat-nav-list>
      <a mat-list-item href="#">Home</a>
      <a mat-list-item href="#">About</a>
      <a mat-list-item href="#">Contact</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    <h1>Welcome to My Website</h1>
  </mat-sidenav-content>
</mat-sidenav-container>

এখানে, mat-icon-button এবং mat-icon ব্যবহার করে সাইডন্যাভের জন্য একটি মেনু আইকন তৈরি করা হয়েছে যা সাইডন্যাভ টগল করবে।

Angular Material এর মাধ্যমে একটি রেসপন্সিভ সাইডন্যাভ তৈরি করা সহজ এবং কার্যকর। Angular Material এর MatSidenav এবং BreakpointObserver ব্যবহার করে আপনি মোবাইল এবং ডেস্কটপ ডিভাইসের জন্য উপযুক্ত সাইডন্যাভ তৈরি করতে পারেন। এটি স্বয়ংক্রিয়ভাবে সাইডন্যাভের আউটলুক কাস্টমাইজ করে এবং ব্যবহারকারীর জন্য আরও সুবিধাজনক নেভিগেশন ব্যবস্থা প্রদান করে।

Angular Material এর MatToolbar এবং MatSidenav কম্পোনেন্ট দুটি জনপ্রিয় ইউআই উপাদান, যা সাধারণত ন্যাভিগেশন এবং অ্যাপ্লিকেশনের মূল কন্টেন্টকে ডিসপ্লে করার জন্য ব্যবহার করা হয়। MatToolbar হল একটি টুলবার, যা অ্যাপ্লিকেশনের শীর্ষে থাকে, এবং MatSidenav হল একটি সাইডবার, যা সাধারণত ন্যাভিগেশন মেনু হিসেবে ব্যবহৃত হয়। এই দুটি কম্পোনেন্ট একসাথে ব্যবহার করে একটি শক্তিশালী ন্যাভিগেশন সিস্টেম তৈরি করা যায়।

এখানে MatToolbar এবং MatSidenav একসাথে কিভাবে ব্যবহার করা যায়, তার একটি উদাহরণ দেওয়া হল।

১. app.module.ts ফাইলে প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, আপনাকে MatToolbarModule এবং MatSidenavModule ইমপোর্ট করতে হবে:

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';

@NgModule({
  imports: [
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,  // For list in sidenav
  ],
})
export class AppModule {}

২. HTML কোডে MatToolbar এবং MatSidenav ব্যবহার করা

এখানে একটি উদাহরণ দেওয়া হল যেখানে MatToolbar এবং MatSidenav একসাথে ব্যবহৃত হচ্ছে:

<mat-sidenav-container class="example-container">
  <!-- Sidenav -->
  <mat-sidenav #sidenav mode="side" opened>
    <mat-nav-list>
      <mat-list-item>Home</mat-list-item>
      <mat-list-item>About</mat-list-item>
      <mat-list-item>Services</mat-list-item>
      <mat-list-item>Contact</mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <!-- Main content -->
  <mat-sidenav-content>
    <!-- Toolbar -->
    <mat-toolbar color="primary">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      <span>My Application</span>
    </mat-toolbar>

    <div class="content">
      <h1>Welcome to My Application</h1>
      <p>This is the main content area.</p>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

ব্যাখ্যা:

• MatSidenavContainer: এটি সাইডন্যাভ এবং মূল কন্টেন্টের কনটেইনার।
• MatSidenav: এটি সাইডবার, যেখানে আপনি ন্যাভিগেশন লিঙ্ক যোগ করতে পারেন। এটি #sidenav এর মাধ্যমে টেমপ্লেটে রেফারেন্স করা হয়েছে, যাতে সাইডবারটি টগল করা যায়।
• MatSidenavContent: এটি মূল কন্টেন্ট অংশ, যেখানে টুলবার এবং অন্যান্য কন্টেন্ট দেখা যাবে।
• MatToolbar: এটি শীর্ষে একটি টুলবার তৈরি করে, যেখানে অ্যাপ্লিকেশন নাম এবং একটি মেনু বাটন থাকে।
• MatIconButton: এটি একটি আইকন বাটন, যা সাইডন্যাভ খুলতে বা বন্ধ করতে ব্যবহার হয়।

৩. CSS স্টাইলিং

এটি আপনার অ্যাপ্লিকেশনের লেআউটকে সুন্দরভাবে সাজানোর জন্য কিছু স্টাইল যোগ করতে পারে:

.example-container {
  height: 100%;
}

mat-sidenav {
  width: 250px;
}

.content {
  padding: 20px;
}

ব্যাখ্যা:

• example-container: এই ক্লাসটি MatSidenavContainer এর জন্য ব্যবহার করা হয়েছে এবং এটি পুরো পৃষ্ঠাটি জুড়ে নেওয়ার জন্য উচ্চতা সেট করা হয়েছে।
• mat-sidenav: সাইডবারটির প্রস্থ ২৫০px হিসেবে নির্ধারণ করা হয়েছে।
• content: মূল কন্টেন্টের জন্য কিছু প্যাডিং যোগ করা হয়েছে যাতে এটি আরও সুন্দরভাবে প্রদর্শিত হয়।

৪. ডাইনামিক সাইডন্যাভ টগল করা

আমরা সাইডন্যাভ টগল করতে (click) ইভেন্ট ব্যবহার করতে পারি। ব্যবহারকারীরা যখন মেনু বাটনে ক্লিক করবেন, তখন সাইডন্যাভটি খুলে যাবে অথবা বন্ধ হয়ে যাবে।

export class AppComponent {
  // MatSidenav instance for toggle
  sidenav: MatSidenav;

  toggleSidenav() {
    this.sidenav.toggle();
  }
}

এটি আপনি MatSidenav এর টগল বাটনে click ইভেন্ট হ্যান্ডল করার জন্য ব্যবহার করতে পারেন।

MatToolbar এবং MatSidenav একসাথে ব্যবহার করার মাধ্যমে আপনি একটি শক্তিশালী এবং রেসপন্সিভ ন্যাভিগেশন সিস্টেম তৈরি করতে পারেন। টুলবারে মেনু বাটন ব্যবহার করে আপনি সহজেই সাইডন্যাভ টগল করতে পারবেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করে তোলে। Angular Material এর এই কম্পোনেন্টগুলো ব্যবহার করে আপনি দ্রুত একটি আধুনিক এবং কার্যকরী ন্যাভিগেশন সিস্টেম তৈরি করতে পারেন।